<template>
  <div class="self">
    <div>
      <img :src="pic" alt="" lazy="loaded" />
      <div v-if="stock == 1 ? false : true"></div>
    </div>
    <div>
      <p>{{ section }}</p>
      <div>
        <div>
          <span>¥</span>
          <span>{{ price }}</span>
          <span>.00</span>
        </div>
        <div>
          <span>{{ selection }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    pic: {
      type: String,
      default: "",
    },
    section: {
      type: String,
      default:
        "英特尔(Intel) i5-12490F 12代 酷睿 处理器 6核12线程 单核睿频至高可达4.6Ghz 20M三级缓存 台式机CPU",
    },
    price: {
      type: String,
      default: "1299",
    },
    selection: {
      type: String,
      default: "选用",
    },
    stock: {
      type: Number,
      default: 1,
    },
  },
};
</script>

<style lang="less" scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
img {
  display: block;
}
.self {
  display: flex;
  justify-content: space-between;
  width: 76vw;
  margin-bottom: 5vh;
  > div:first-child {
    position: relative;
    margin-right: 2.4vw;
    >img {
      height: 22.93vw;
      width: 22.93vw;
      border-radius: 1.6vw;
    }
    > div {
      position: absolute;
      top: 0;
      width: 100%;
      height: 22.93vw;
      border-radius: 1.6vw;
      background: hsla(0, 0%, 100%, 0.5) url("https://storage.360buyimg.com/dlxt/master-of-loader/ea60a75/img/noproduct.3af89b89.svg")
        no-repeat 50%;
      background-size: 13.33vw 13.33vw;
    }
  }
  > div:last-child {
    padding-top: 1.07vw;
    padding-right: 4.27vw;
    // padding-bottom: 5.33vw;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    > p {
      margin-bottom: 2.13vw;
      line-height: 4.53vw;
      color: #333;
      font-size: 3.2vw;
      overflow: hidden;
      text-overflow: ellipsis;
      /*弹性伸缩盒子模型显示*/
      display: -webkit-box;
      /*限制在一个块元素显示的文本的行数*/
      -webkit-line-clamp: 2;
      /*设置或检索伸缩盒子对象的子元素的排列方式*/
      -webkit-box-orient: vertical;
    }
    > div {
      // margin-bottom: 5vh;
      display: flex;
      justify-content: space-between;
      align-items: center;
      > div:first-child {
        color: #f0250f;
        font-size: 2vw;
        > span:nth-child(2) {
          font-size: 4vw;
          font-weight: 550;
        }
      }
      > div:last-child {
        height: 5.33vw;
        padding: 0.53vw 2.4vw;
        font-size: 2.67vw;
        width: 11.2vw;
        border: 0.1vw solid #f4f5f7;
        // text-align: center;
        border-radius: 10vw;
        > span {
          display: inline-block;
          font-size: 2.67vw;
          padding: 0.53vw 0;
          margin: 0 auto;
          color: rgb(82, 84, 225);
          line-height: 100%;
        }
      }
    }
  }
}
</style>